<html>
<head>
<style>
body {
    min-width: 357px;
    overflow-x: hidden;
    margin: 10px;
    padding: 0px;
    color: white;
    background: black;
}

iframe {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

.textbox {
    width: 225px;
    float: right;
}

label {
    float: left;
}

p {
    clear: both;
}

a {
    color: #0C0;
}

#contact-form-comment-2542 {
    width: 100%;
    height: 200px;
}
</style>

<script type="text/javascript">
var contactURL = "http://hackaday.com/contact-hack-a-day/";

function GetData(url, sub, body){
    chrome.tabs.getSelected(null, 
        function(tab){
            if(url) url.value = tab.url;     // Fill in the URL
            if(sub) sub.value += tab.title;  // Attempt to create a suitable subject
            chrome.tabs.sendRequest(tab.id, {method: "getSelection"},   // Get the currently selected text.
                function(response){
                    if(body){
                        body.innerHTML = response.data;
                        if(!url){
                            body.innerHTML += "\n[source: "+tab.url+"]";
                        }
                    }
                });
        }
    );
}

function showError(err){
    document.getElementById("hadContainer").innerHTML = "<span style='color:red;font-weight:bold'>"+err+"</span>";
}

function handleHad(){
    var data = this.responseText;
    var doc = new window.DOMParser().parseFromString(data, "text/xml");
    var formDiv = doc.getElementById("contact-form-2542");  // We are going to copy the form in its entirety, with only minor changes
    if(!formDiv){
        showError("Could not locate form div!");
        return;
    }

    var form    = formDiv.getElementsByTagName("form")[0];
    if(!form){
        showError("Could not locate form!");
        return;
    }

    var links   = formDiv.getElementsByTagName("a");
    for(var i=0;i<links.length;i++){
        links[i].setAttribute("target", "_blank");
    }
    
    // Need to fix the url to be absolute
    form.setAttribute("action", contactURL+form.getAttribute("action"));
    form.setAttribute("target", "_blank");  // And the target to be a new window/tab (Wouldn't want to open it in the extension's popup.)
    
    document.getElementById("hadContainer").innerHTML = formDiv.innerHTML; // Display the form in the popup.
    
    // Get the input fields
    var urlInput = document.getElementById("url-2542");
    var subInput = document.getElementById("subject-2542");
    var bodyInput= document.getElementById("contact-form-comment-2542");
    
    // And fill them.
    subInput.value = "[Hack a Day] ";
    GetData(urlInput, subInput, bodyInput);
}

function handleError(){
console.log(this);
    showError("Error loading contact page! (Status: "+this.status+")");
}

document.onload = new function(){
    //     I think this method is best (the only other solutions I could think of were to try to add an iframe
    // and install a request handler for the contact page to fill everything in, or just add an iframe and try
    // to get the permissions to let me acccess it.)
    var xhr = new XMLHttpRequest();
    xhr.onload = handleHad;
    xhr.onerror = handleError;
    xhr.open("GET", contactURL);
    xhr.send();
}
</script>
</head>
<body>
<div id="hadContainer">Loading...</div>
</body>
</html>
